import React, { forwardRef, useEffect, useImperativeHandle, useState } from 'react';

import { Col, Form, Input, message, Modal, Row, Select, } from 'antd';
import { modalLayoutSm } from '@/config/layout';
import { request } from 'umi';

const DictModal = (props: any, refs: any) => {
  const [form] = Form.useForm();
  // const [fileList,setfileList] = useState([]);
  const [measureClassData, setmeasureClassData] = useState([]);
  const { setFieldsValue, resetFields } = form;
  const [code, setCode] = useState('');
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [detail, setdetail] = useState({})
  const { TextArea } = Input;
  const [options, setoptions] = useState([]);
  //显示弹窗
  const showModal = () => {
    setIsModalVisible(true);
  };

  //取消
  const handleCancel = () => {
    setIsModalVisible(false);
    setCode('');
    resetFields();
    props.callback && props.callback();
  };
  //确定
  const handleOk = () => {
    form
      .validateFields()
      .then((vals) => {
        let Obj = form.getFieldsValue();
        Obj = {
          ...Obj,
        };

        const url = code ? '/sys/user/modify' : '/sys/user/add';
        if (code) {
          Obj.user_id = code;
        } else {
        }
        request(url, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          data: Obj,
        }).then((res) => {
          message.success('保存成功');
          setIsModalVisible(false);
          handleCancel();
        });
      })
      .catch((info) => { });
  };

  const getDetail = (record: any) => {
    request('/sys/user/get', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      data: {
        user_id: record.user_id,
        user_code: record.user_code
      },
    }).then((res) => {
      setdetail(res?.data?.data)
      setFieldsValue({
        ...res?.data?.data,

      });
      showModal();
    });
  };
  useImperativeHandle(refs, () => ({
    init: (id: any, record: any) => {
      if (id) {
        setCode(id);
        getDetail(record);
      } else {
        resetFields();
        showModal();
      }

      // setfileList([]);
    },
  }));
  const getdata = () => {
    request('/data/dynamic/query', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      data: {
        apiID: 'GL_001'
      },
    }).then((res) => {
      const data = res?.data?.data;
      const obj = {};
      data.sort((a, b) => {
        return a.org_level - b.org_level;
      });
      setoptions(data);
    });
  };
  useEffect(() => {
    getdata();
  }, []);
  return (
    <Modal
      title={code === '' ? '新增' : '编辑'}
      visible={isModalVisible}
      onOk={handleOk}
      onCancel={handleCancel}
      centered
      width={1000}
      maskClosable={false}
      bodyStyle={{
        maxHeight: window.innerHeight - 150,
        overflowY: 'auto',
      }}
    >
      <Form form={form} layout="vertical" {...modalLayoutSm}>
        <Row>
          <Col span={12}>
            <Form.Item
              label="登录账号"
              name="user_code"
              rules={[{ required: true, message: '请输入登录账号!' }]}
            >
              <Input />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="用户名称"
              name="user_name"
              rules={[{ required: true, message: '请输入用户名称!' }]}
            >
              <Input />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="所属组织"
              name="org_id"
              rules={[{ required: true, message: '请选择所属组织!' }]}
            >
              <Select showSearch filterOption={(input, option) =>
                (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
              }>
                {options.map((item: any) => {
                  return <Option value={item.org_code_id.toString()} label={item.org_name}>{item.org_name}</Option>;
                })}
              </Select>
            </Form.Item>
          </Col>
          {
            code == '' && <Col span={12}>
              <Form.Item
                label="用户密码"
                name="user_pwd"
                rules={[{ required: true, message: '请输入user_pwd!' }]}
              >
                <Input disabled={code !== ''} />
              </Form.Item>
            </Col>
          }
          <Col span={12}>
            <Form.Item
              label="手机号"
              name="phone"
            >
              <Input />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="备注"
              name="remark"
            >
              <Input />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="排序"
              name="sno"
            >
              <Input />
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
};
const AddMCom = forwardRef(DictModal);

export default AddMCom;
